import 'package:flutter/material.dart';

class CustomScrollViewCase extends StatelessWidget {
  const CustomScrollViewCase({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        //  网格
        SliverGrid.builder(
          // 主轴(垂直)默认为垂直方向，此属性用于固定侧轴(水平)方向子元素的个数
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, // 1.1 设置侧轴方向子元素个数，此时每行展示的子元素个数是固定的
            mainAxisSpacing: 5.0, // 1.2 主轴(垂直)方向子元素间距
            crossAxisSpacing: 5.0, // 1.3 侧轴(水平)方向子元素间距
            childAspectRatio: 4 / 3, // 1.4 子元素宽高比，默认宽高相同 1: 1
          ),
          // 子元素数量
          itemCount: 6,
          // 构造子元素
          itemBuilder: (BuildContext context, int index) {
            return Container(
              color: Colors.pink,
              alignment: Alignment.center,
              child: Text('传智播客 $index'),
            );
          },
        ),
        // List
        SliverList(
            delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return Container(
              padding: const EdgeInsets.only(bottom: 5),
              child: Container(
                height: 120.0,
                color: Colors.orange,
                alignment: Alignment.centerLeft,
                child: Text('传智教育 $index'),
              ),
            );
          },
          // 子元素个数
          childCount: 10,
        ))
      ],
    );
  }
}
